<template>
  <div id="slide">
    <div class="slidebox"></div>
    <el-menu
      class="el-menu-vertical-demo"
      background-color="transparent"
      text-color="#fff"
      router
      :unique-opened="true"
      active-text-color="#409eff"
      @select="clearSess"
    >
      <!-- 一级菜单 -->
      <template v-for="item in dataFilter">
      <!-- <template v-for="item in data"> -->
        <el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
          <template slot="title">
            <span>{{item.title}}</span>
          </template>
          <!-- 二级菜单 -->
          <template v-for="itemChild in item.subs">
            <el-submenu
              v-if="itemChild.subs && itemChild.subs.length"
              :index="itemChild.index"
              :key="itemChild.index"
            >
              <template slot="title">
                <span>{{itemChild.title}}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item
                v-for="itemChild_Child in itemChild.subs"
                :index="itemChild_Child .index"
                :key="itemChild_Child.index"
              >
                <span slot="title">{{itemChild_Child.title}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="itemChild.index" :key="itemChild.index">
              <span slot="title">{{itemChild.title}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.index" :key="item.index">
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  title: "slide",
  data() {
    return {
      data: [
        {
          index: "0",
          title: "工作台",
          subs: [
            {
              index: "/work",
              title: "个人工作台"
            }
          ]
        },
        {
          index: "1",
          title: "资金业务风险管理",
          subs: [
            {
              index: "/1/1",
              title: "内控指标",
              subs: [
                {
                  index: "/Internalearly",
                  title: "指标预警"
                },
                {
                  index: "/InternaltargetQuery",
                  title: "指标查阅"
                },
                {
                  index: "/InternalearlySet",
                  title: "指标预警设置"
                }
              ]
            },
            {
              index: "/1/2",
              title: "公共信息管理",
              subs: [
                {
                  index: "/BondsMaintain",
                  title: "债券资料维护"
                },
                {
                  index: "/FinancialMaintenance",
                  title: "理财产品资料维护"
                },
                {
                  index: "/Counterparty",
                  title: "交易对手库"
                },
                {
                  index: "/OrganizationManagement",
                  title: "机构账户管理"
                },
                {
                  index: "/TradeAccount",
                  title: "同业账户管理"
                }
              ]
            },
            {
              index: "/1/3",
              title: "资金业务流程管理",
              subs: [
                {
                  index: "/accountDetail",
                  title: "债券交易申请"
                },
                {
                  index: "/zqhgApply",
                  title: "债券回购交易申请"
                },
                {
                  index: "/ncdApply",
                  title: "同业存单交易申请"
                },
                {
                  index: "/zqjdApply",
                  title: "债券借贷交易申请"
                },
                {
                  index: "/interbankApply",
                  title: "同业拆借交易申请"
                },
                {
                  index: "/nostroApply",
                  title: "存放同业交易申请"
                },
                {
                  index: "/licaiApply",
                  title: "理财产品交易申请"
                },
                {
                  index: "/TransactionRecord",
                  title: "交易申请记录查阅"
                }
              ]
            },
            {
              index: "/1/4",
              title: "资金业务流程管控",
              subs: [
                {
                  index: "/controlBank",
                  title: "行社交易管控设置"
                },
                {
                  index: "/ProvincialControl",
                  title: "全省宏观管控设置"
                }
              ]
            },
            {
              index: "/1/5",
              title: "异常业务管理",
              subs: [
                {
                  index: "/abnormal",
                  title: "异常业务预警"
                }
              ]
            },
            {
              index: "/1/6",
              title: "统计分析",
              subs: [
                {
                  index: "/Assets",
                  title: "持有资产登记簿"
                },
                {
                  index: "/AbnormalBusiness",
                  title: "异常业务分析"
                }
              ]
            }
          ]
        },
        {
          index: "2",
          title: "流动性风险管理",
          subs: [
            {
              index: "/2/1",
              title: "监管指标",
              subs: [
                {
                  index: "/earlywarning",
                  title: "指标预警"
                },
                {
                  index: "/targetQuery",
                  title: "指标查阅"
                },
                {
                  index: "/earlywarningSet",
                  title: "指标预警设置"
                }
              ]
            },
            {
              index: "/2/2",
              title: "风险压力测试工具",
              subs: [
                {
                  index: "/pressure",
                  title: "流动性风险压力测试"
                }
              ]
            },
            {
              index: "/2/3",
              title: "风险统计",
              subs: [
                {
                  index: "/regulatoryAnalysis",
                  title: "监管分析"
                }
              ]
            }
          ]
        },
        {
          index: "3",
          title: "系统管理",
          subs: [
            {
              index: "/Administration",
              title: "用户管理"
            },
            {
              index: "/jurisdiction",
              title: "栏目权限管理"
            },
            {
              index: "/organizational",
              title: "组织架构管理"
            },
            {
              index: "/Institutional",
              title: "机构信息维护"
            }
          ]
        }
      ],
      dataFilter: ''
    };
  },
  created() {
    this.quanxian();
  },
  methods: {
    quanxian() {
      let userstr = sessionStorage.getItem("user");
      let user = JSON.parse(userstr);
      let menuarr = user.menuList;
      // 删除只有二级菜单的list和三级菜单的list的长度为空的数组
      menuarr.forEach((item, index) => {
        if (item.name == "工作台" || item.name == "系统管理") {
          item.list.forEach((ele, k) => {
            delete ele["list"];
          });
        } else {
          item.list.forEach((ele, k) => {
            if (ele.list.length == 0) {
              delete ele["list"];
            }
          });
        }
      });
      // 过滤没有掉三级菜单没有子目录的让其为空
      menuarr.forEach((item, index) => {
        if (!(item.name == "工作台" || item.name == "系统管理")) {
          item.list = item.list.filter((ele, i) => {
            return Boolean(ele.list) == true;
          });
        }
      });
      // 删除一级菜单下list为空的数据，然后删除一级菜单
      menuarr.forEach((item, index) => {
        if (item.list.length == 0) {
          menuarr.splice(index, 1);
        }
      });
      console.log(menuarr);
      menuarr.forEach((item,index)=> {
        item.title = item.name;
        item.index = item.url? item.url:index+'i';
        if (item.list) {
          item.subs = item.list;
          item.subs.forEach((ele,k)=> {
            ele.title = ele.cName;
            ele.index = ele.url? ele.url: `${index}/${k}i`;
            if (ele.list) {
              ele.subs = ele.list;
              ele.subs.forEach((tItem,tIndex)=> {
              tItem.title = tItem.sName;
              tItem.index = tItem.url? tItem.url: `${index}/${k}/${tIndex}i`;
            })
            }
          })
        }
      })
      console.log(menuarr);
      this.dataFilter = menuarr;
      // -----------------------------------------------------
      // 标题匹配的数组
      // let parentarr = [];
      // menuarr.forEach((item, index) => {
      //   // 找到标题匹配的对象
      //   let pipei = this.data.find((ele, j) => {
      //     return item.name == ele.title;
      //   });
      //   parentarr.push(pipei);
      // });
      // let tempparent = JSON.stringify(parentarr); //ignore
      // let parentarrCopy = JSON.parse(tempparent);
      // parentarrCopy.forEach((item, index) => {
      //   // 删除数组子菜单的所有数据
      //   item.subs.splice(0, item.subs.length);
      // });
      // console.log(parentarrCopy);
      // parentarr 匹配项的所有数据
      // menuarr.forEach((item, index) => {
      //   item.list.forEach((ele, j) => {
      //     let obj = parentarr[index].subs.find((pitem, pindex) => {
      //       return pitem.title == ele.cName;
      //     });
      //     parentarrCopy[index].subs.push(obj);
      //   });
      // });
      // let parentarrAll = JSON.stringify(parentarrCopy); //ignore
      // let parentarrAllSub = JSON.parse(parentarrAll);
      // parentarrAllSub.forEach((item, index) => {
      //   item.subs.forEach((itemF, indexF) => {
      //     if (itemF.subs) {
      //       itemF.subs = [];
      //     }
      //   });
      // });

      // menuarr.forEach((item, index) => {
      //   item.list.forEach((ele, i) => {
      //     if (ele.list) {
      //       ele.list.forEach((menuItem, index) => {
      //         // console.log(menuItem.sName)
      //         let threeArr = parentarrCopy[index].subs[i].subs;
      //         console.log(threeArr);
      //         // debugger;
      //         if (threeArr) {
      //           let obj = parentarrCopy[index].subs[i].subs.find((pitem, pindex) => {
      //               return pitem.title == menuItem.sName;
      //             }
      //           );
      //           console.log(obj);
      //         }
      //       });
      //     }
      //     parentarrCopy[index].subs.forEach((cItem, cIndex) => {
      //       let threeArr = parentarrCopy[index].subs[i].subs;
      //       if (threeArr) {
      //         let obj = parentarrCopy[index].subs[i].subs.find(
      //           (pitem, pindex) => {
      //             // return pitem.title == ele.cName;
      //             // console.log(pitem.title);
      //           }
      //         );
      //       }
      //     //   // let obj = parentarrCopy[index].subs[i].subs.find((pitem, pindex) => {
      //     //   //   console.log(pitem);
      //     //   // })
      //     //   // console.log(cItem);
      //     // });
      //     // if (ele.list) {
      //     //   console.log(parentarrCopy[index].subs);
      //     //   // let obj = parentarrCopy[index].subs.list[]
      //     // }
      //   });
      // });
      // console.log(parentarrAllSub);
      // console.log(parentarrCopy);
      // this.data = parentarrAllSub;
    },
    clearSess() {
      let user = sessionStorage.getItem("user");
      let token = sessionStorage.getItem("token");
      sessionStorage.clear();
      sessionStorage.setItem("user", user);
      sessionStorage.setItem("token", token);
    }
  }
};
</script>

<style lang="scss">
#slide {
  .el-submenu__title i {
    color: #cedaed;
  }
  position: fixed;
  width: 200px;
  padding-right: 20px;
  top: 60px;
  left: 0;
  bottom: 0;
  background-color: #353738;
  background: linear-gradient(#7091a0, #14181e);
  overflow-y: auto;
  overflow-x: hidden;
  .el-menu {
    width: 200px;
    .slide-title {
      font-size: 16px;
      color: #6ab6fb;
    }
  }
  .el-submenu__title:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>
